<template>
    <view class="home-page">
        <view class="w-full p-4 box-border" @click="goToIntroPage()">
            <image
                src="https://cdn.krisli.cn/imgs/39bba63ee13ce547175bd9303.png"
                class="w-full border-8"
            ></image>
        </view>
        <view class="button-container">
            <nut-button type="primary" @click="goToLicensePage('query')">查询车辆信息</nut-button>
            <nut-button type="primary" @click="goToLicensePage('add')">创建车辆信息</nut-button>
        </view>
    </view>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { useShareApp } from '@/utils/share'
useShareApp()

const goToIntroPage = () => {
    Taro.navigateTo({
        url: '/pages/intro/index'
    })
}

const goToLicensePage = (pageType: string) => {
    Taro.navigateTo({
        url: `/pages/license/index?pageType=${pageType}`
    })
}
</script>

<style>
.home-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}

.banner {
    width: 100%;
    height: 300px;
}

.banner image {
    width: 100%;
    height: 100%;
}

.button-container {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 20px 0;
}

.car-list {
    width: 90%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.empty-data {
    font-size: 16px;
    color: #999;
}

.keyboard-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
}
</style>
